<template>
  <div class="Personal">
    <my-header></my-header>
    <!--个人信息-->
    <div class="long">
      <img src="../../../assets/cent/1个人中心/用户头像椭圆.png" alt="">
      <span>昵称</span>
      <a href="">账户提现</a>
    </div>
    <!--我的订单-->
    <div class="order">
      <div class="order1">
        <span>我的订单</span>
        <router-link :to="{name:''}">查看更多订单&nbsp></router-link>
      </div>
      <div class="order2">
        <a href="">
          <img src="../../../assets/cent/1个人中心/待支付.png" alt="">
          <p>待支付</p>
        </a>
        <a href="">
          <img src="../../../assets/cent/1个人中心/待发货.png" alt="">
          <p>待发货</p>
        </a>
        <a href="">
          <img src="../../../assets/cent/1个人中心/待收货.png" alt="">
          <p>待收货</p>
        </a>
        <a href="">
          <img src="../../../assets/cent/1个人中心/交易完成.png" alt="">
          <p>交易成功</p>
        </a>
      </div>
    </div>
    <!--返金排号-->
    <div class="fanjin">
      <div class="dld">
        <span>我的返金排号</span>
        <a href="">查看更多&nbsp></a>
      </div>
      <div class="paihao">
        <span>2017/06/26</span>
        <span>消费:¥100</span>
        <span>排号:10</span>
      </div>
      <div class="paihao">
        <span>2017/06/26</span>
        <span>消费:¥100</span>
        <span>排号:10</span>
      </div>
      <div class="paihao">
        <span>2017/06/26</span>
        <span>消费:¥100</span>
        <span>排号:10</span>
      </div>
      <div class="paihao">
        <span>2017/06/26</span>
        <span>消费:¥100</span>
        <span>排号:10</span>
      </div>
    </div>
    <!--我的服务-->
    <div class="service">
      <div class="service1">
        <a href="">
          <p>0</p>
          <p>我的神灯值</p>
        </a>
        <a href="">
          <p>0</p>
          <p>我的足迹</p>
        </a>
        <a href="">
          <p>0</p>
          <p>我的优惠券</p>
        </a>
        <a href="">
          <p>0</p>
          <p>我的心得</p>
        </a>
      </div>
      <div class="service2">
        <a href="" class="but">
          <img src="../../../assets/cent/个人中心/wodeshangcheng.png" alt="">
          <p>我的商城</p>
        </a>
        <a href="" class="but">
          <img src="../../../assets/cent/个人中心/shimingrenzhneg.png" alt="">
          <p>实名认证</p>
        </a>
        <a href="" class="but">
          <img src="../../../assets/cent/个人中心/shouhuodizhi.png" alt="">
          <p>收货地址</p>
        </a>
        <a href="" class="but">
          <img src="../../../assets/cent/个人中心/guanzhugongzhonghao.png" alt="">
          <p>关注公众号</p>
        </a>
        <!--<a href="" class="but">-->
          <!--<img src="../../../assets/cent/个人中心/kehufankui.png" alt="">-->
          <!--<p>客服与反馈</p>-->
        <!--</a>-->
      </div>
    </div>
    <div class="bottom"></div>
    <my-footer></my-footer>
  </div>
</template>
<script>
  import MyHeader from '../../../components/Center/Personal/MyHeader.vue'
  import MyFooter from '../../home/MyFooter/MyFooter.vue'
  export default {
    data(){
      return{

      }
    },
    components: {
      MyHeader,
      MyFooter
    }
  }

</script>
<style scoped>
  .long{
    width: 35rem;
    height: 14rem;
    background-color: #fee3e3;
    background-image: url("../../../assets/cent/个人中心/shangcengdatu.png");
  }
  .long a{
    display: inline-block;
    width: 8.75rem;
    height: 2.5rem;
    font-size: 1.5rem;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    line-height: 2.5rem;
    opacity: 0.72;
    background-color: #000000;
    border-radius: 1.25rem;
  }
  .long img{
    margin: 3rem 0 0 2rem;
    width: 5rem;
    height: 5rem;
  }
  .long span{
    vertical-align: 2rem;
    font-size: 1.88rem;
    margin-left: 1rem;
    color: #fff;
  }
  .long a:nth-child(3){
    float: right;
    margin: 10rem 3rem 3rem 0;
  }
  .order{
    width: 35rem;
    height: 11.25rem;
    border: 0px solid #000;
    background-color: white;
  }
  .order1{
    width: 35rem;
    height: 5rem;
    border: 0px solid red;
  }
  .order1 span{
    display: inline-block;
    font-size: 1.88rem;
    color: #4d4d4d;
    float: left;
    margin: 1.2rem 13rem 0 2.5rem;
  }
  .order1 a{
    width: 11rem;
    height: 2rem;
    border: 0px solid red;
    display:inline-block;
    font-size: 1.5rem;
    color: #666666;
    float: right;
    text-decoration: none;
    margin-top: 1.5rem;
  }
  .order2{
    width: 35rem;
    height: 6.25rem;
    border: 0px solid red;
    text-align: center;
  }
  .order2 a{
    display: inline-block;
    width: 8rem;
    height: 5rem;
    text-decoration: none;
    border: 0px solid red;
  }
  .order2 a img{
    width: 1.5rem;
    height: 1.5rem;
    margin: 1rem 0 0.2rem 0;
  }
  .order2 a p{
    font-size: 1.3rem;
    color: #4d4d4d;
  }
  .fanjin{
    width: 35rem;
    background-color: white;
  }
  .dld {
    display: inline-block;
    font-size: 1.5rem;
    margin-left: 2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .dld a{
    margin-left: 15rem;
  }
  .paihao{
    width: 35rem;
    height: 3rem;
    text-align: center;
    display: flex;
    margin: 0.7rem 0rem 0.7rem 0rem;
    border-bottom: 1px solid #f2f2f2;
  }
  .paihao span{
    flex: 1;
    font-size: 1.5rem;
    color: #666666;
  }
  .service{
    width: 35rem;
    text-align: center;
    margin-top: 1rem;
  }
  .service1 a{
    display: inline-block;
    width: 8rem;
    margin-bottom: 1rem;
    text-decoration: none;
  }
  .service1 a p{
    font-size: 1.2rem;
  }
  .service1 a p:nth-child(1){
    margin: 1rem 0 0.5rem 0;
    color: #e53e42;
  }
  .service2{
    width: 35rem;
    height: 20rem;
    border-top: 1px solid #ccc;
  }
  .service2 a{
    display: inline-block;
    width: 8rem;
    height: 5rem;
    font-size: 1.2rem;
    margin-top: 1rem;
  }
  .bottom{
    width: 35rem;
    height: 1rem;
  }
  .but img{
    width: 2rem;
    height: 1.8rem;
  }

</style>
